<template>
  <div class="common-statistics">
    <stats-card
        title="菜谱总数" color="#CA6C65" unit="个" icon="iconfont icon-caipu"
        :value="foodStore.stats.recipeCount"/>

    <stats-card
        title="菜谱类别" color="#6FBB69" unit="种" icon="iconfont icon-leibie"
        :value="foodStore.stats.categoryCount"/>

    <stats-card
        title="做菜次数" color="#E4BF62" unit="次" icon="iconfont icon-cishu"
        :value="foodStore.stats.workCount"/>

    <stats-card
        title="平均次数" color="#5470C6" unit="次/月" icon="iconfont icon-pinlv"
        :value="getAverageCount()"/>
  </div>
</template>

<script setup lang="ts">
import StatsCard from '@/components/StatsCard.vue'
import { onMounted } from 'vue'
import { useFoodStore } from '@/store/food'

const foodStore = useFoodStore()

onMounted(async () => {
  await foodStore.queryStats()
})

const getAverageCount = () => {
  if (foodStore.recordStats.length === 0) {
    return 0
  }
  const sum = foodStore.recordStats.map((item) => item.value).reduce((acc, curr) => acc + curr, 0)
  return (sum / foodStore.recordStats.length).toFixed(2)
}
</script>
